<template>
	<!-- <view class="content"> -->
		<mix-pulldown-refresh ref="mixPulldownRefresh" class="panel-content" :top="118" @refresh="onPulldownReresh" @setEnableScroll="setEnableScroll">
		<view class="isnull" v-show="false">
			<image src="../../static/icon_buy.png" mode=""></image>购物车还是空的<text>去逛逛</text>
		</view>
		<scroll-view class="panel-scroll-box" :scroll-y="true" @scrolltolower="loadMore" :style="{height: 'calc(100% - ' + pageTop + 'px)'}">
			<view class="uni-list">
				<view class="uni-list-cell" v-for="(item,index) in list.rows" :key="index">
					<view class="uni-media-list">
						<!-- <image class="sele" :src="item.activeIMG" mode="" @tap="selst(index)"></image> -->
						<image class="sele" src="/static/icon_choose_pre.png" v-show="item.ischeck" mode="" @tap="selst(index)"></image>
						<image class="sele" src="/static/icon_choose_nor.png" v-show="!item.ischeck" mode="" @tap="selst(index)"></image>
						<image class="uni-media-list-logo" :src="baseURL+item.cover_pic"></image>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top">{{item.g_name}}</view>
							<view class="tabs" v-if="item.guige!=null">{{item.guige}}</view>
							<view class="uni-media-list-text-bottom uni-ellipsis">
								<text>¥ {{item.price}}</text>
								<uni-number-box v-on:change="onNumberChange3()" :value="item.num" min="1" :ids="item.id"></uni-number-box>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="footer">
			<image class="quanx" :src="allselnum?'/static/icon_choose_pre.png':'/static/icon_choose_nor.png'" mode="" @click="allsel"></image>
			全选
			<view class="jiesuan" @click="gopay">结算</view>
			<view class="jiesuan shanchu" @click="mallShoppingcarremove">删除</view>
			<text class="hej">合计：¥{{total_price}}</text>
		</view>
		<!-- <buttomNav :url='"/pages/newpages/shopHome"'></buttomNav> -->
		</mix-pulldown-refresh>
	<!-- </view> -->
</template>

<script>
	import uniNumberBox from '../../components/uni-number-box.vue';
	import API from '../../common/api.js';
	import buttomNav from '@/components/buttomNav.vue';
	import mixPulldownRefresh from '@/components/mix-pulldown-refresh/mix-pulldown-refresh';
	export default {
	    data() {
	        return {
				baseURL:API.baseURL,
				list:[],
				numberValue3:0,
				userid:uni.getStorageSync("userid"),
				total_price:0,//总价
				allselnum:false,//全选还是全不选
				
				pageTop:uni.upx2px(118)
	        };
	    },
		onReady() {
			this.mallShoppingcar_list();
		},
		onNavigationBarButtonTap(){
			// console.log("dianji");
			uni.showModal({
				title: '123',
				content: '123',
				showCancel: false,
				cancelText: '123',
				confirmText: '123',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
	    methods: {
			mallShoppingcarremove(){
				if(this.total_price==0){
					uni.showToast({
						title:'请选择商品',
						icon:'none',
						mask: false,
						duration: 1500
					});
					return false;
				}
				var arrjis = [];
				for (var i = 0; i < this.list.rows.length; i++) {
					if(this.list.rows[i].ischeck){
						arrjis.push(this.list.rows[i].id);
						
					}
				}
				arrjis = arrjis.toString();
				var _this=this;
				uni.showModal({
					title: '提示',
					content: '是否要删除选中的商品',
					success: res => {
						if(res.confirm){
							uni.request({
								url:API.mallShoppingcarremove,
								method:"POST",
								data:{ids:arrjis},
								header:API.get_head(),
								success: (res) => {
									uni.showToast({
										title: res.data.message
									});
									_this.mallShoppingcar_list();
								},
								fail: () => {
									uni.showToast({
										title:"加载失败",
										icon:'none'
									})
								 }
							})
						}
					},
				});
			},
			gopay(){//结算
				if(this.total_price==0){
					uni.showToast({
						title:'请选择商品',
						icon:'none',
						mask: false,
						duration: 1500
					});
					return false;
				}
				var arrjis = [];
				var goods = [];
				for (var i = 0; i < this.list.rows.length; i++) {
					if(this.list.rows[i].ischeck){
						arrjis.push(this.list.rows[i].id);
						goods.push(this.list.rows[i]);
					}
				}
				arrjis = arrjis.toString();
				goods = JSON.stringify(goods);
				uni.navigateTo({
					url: '/pages/shop/to_pay_order?id='+arrjis+'&goods='+goods+'&total_price='+this.total_price,
				});
			},
			allsel(){
				this.allselnum=!this.allselnum;
				for (var i = 0; i < this.list.rows.length; i++) {
					this.list.rows[i].ischeck=this.allselnum;
					if(this.allselnum){
						this.list.rows[i].activeIMG='/static/icon_choose_pre.png';
					}else{
						this.list.rows[i].activeIMG='/static/icon_choose_nor.png';
					}
				}
				this.jiesuanzhongjia();
			},
			selst(index){//选中，取消
				var list =this.list;
				list.rows[index].ischeck=!list.rows[index].ischeck;
				if(list.rows[index].ischeck){
					list.rows[index].activeIMG='/static/icon_choose_pre.png';
				}else{
					list.rows[index].activeIMG='/static/icon_choose_nor.png';
				}
				this.list = [];//重新渲染
				this.list = list;
				for (var i = 0; i < this.list.rows.length; i++) {
					if(!this.list.rows[i].ischeck){this.allselnum=false;break;}
					if(i==this.list.rows.length-1){this.allselnum=true;}
				}
				this.jiesuanzhongjia();
			},
			jiesuanzhongjia(){//总价计算
				this.total_price=0;
				for (var i = 0; i < this.list.rows.length; i++) {
					if(this.list.rows[i].ischeck){
						this.total_price += this.list.rows[i].price*this.list.rows[i].num;
					}
				}
			},
			mallShoppingcar_list(type) {//获取详情
				var _this=this;
				uni.request({
					url:API.mallShoppingcar_list,
					method:"POST",
					data:{u_id:_this.userid},
					header:API.get_head(),
					success: (res) => {
						_this.list=res.data;
						for(var i=0;i<_this.list.rows.length;i++){
							_this.list.rows[i].ischeck=false;
							_this.list.rows[i].activeIMG='/static/icon_choose_nor.png';
						}
						
						if(type === 'refresh'){
							_this.$refs.mixPulldownRefresh && _this.$refs.mixPulldownRefresh.endPulldownRefresh();
						}
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
						if(type === 'refresh'){
							_this.$refs.mixPulldownRefresh && _this.$refs.mixPulldownRefresh.endPulldownRefresh();
						}
					 }
				})
			},
			onNumberChange3(value){
				var _this=this;
				uni.request({
					url:API.updateShoppingcarNum,
					method:"GET",
					data:{
						id:value.id,
						num:value.value,
						type:'num'
					},
					header:API.get_head(),
					success: (res) => {
						if(!res.data.success){
							uni.showToast({
								title:res.data.message,
								icon:'none',
								mask: false,
								duration: 1500
							});
						}else{
							for (var i = 0; i < _this.list.rows.length; i++) {
								if(_this.list.rows[i].id==value.id){
									_this.list.rows[i].num=value.value;
									_this.jiesuanzhongjia();
									break;
								}
							}
							
						}
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				})
			},
			//下拉刷新
			onPulldownReresh(){
				// console.log('onPulldownReresh');
				this.mallShoppingcar_list('refresh');
			},
			//上滑加载
			loadMore(){
				// console.log('loadMore')
				// this.loadNewsList('add');
			},
			//设置scroll-view是否允许滚动，在小程序里下拉刷新时避免列表可以滑动
			setEnableScroll(enable){
				// if(this.enableScroll !== enable){
				// 	this.enableScroll = enable;
				// }
			},
		},
		components: {
			uniNumberBox,
			buttomNav,
			mixPulldownRefresh,
		},
	};
</script>

<style lang="scss">
	.isnull{color:#666666;font-size: 30upx;position:fixed;top:45%;text-align: center;width:100%;}
	.isnull>text{color:#333333;font-size: 30upx;padding: 10upx;border:1upx solid #CCCCCC;margin-left:10upx;}
	.isnull>image{width: 60upx;height:60upx;vertical-align: middle;margin-right:20upx;}
	.uni-media-list-logo{width:150upx;height:150upx;border:1upx solid #CCCCCC;}
	.uni-media-list-body{height: 150upx;}
	.uni-media-list-text-top{overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
	.tabs{overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
	// .uni-list{margin-bottom:200upx}
	.uni-list-cell:after{display: none;margin-bottom:20upx;}
	.sele{width:45upx;height:45upx;padding-right:30upx;margin-top:55upx;}
	.numbox{padding:0 30upx 30upx 0;text-align:right;}
	.uni-media-list-text-bottom .uni-numbox{float:right;}
	.uni-media-list-text-bottom text{color:#FF6B01;font-size:34upx}
	
	.footer{
		height:98upx;width: 100%;overflow: hidden;position:fixed;bottom:0;
		background:#ffffff;
		z-index: 999;
		line-height:98upx;
		box-shadow:#CCCCCC 20upx 20upx 20upx 20upx;
		.quanx{width:45upx;height: 45upx;margin:0 20upx;vertical-align: middle;}
		.hej{float:right;color:#F6741D;font-size:30upx;margin-right:20upx;line-height:98upx}
		.jiesuan{width:150upx;height:98upx;background:#FF6B01;color:#ffffff;font-size:34upx;text-align:center;line-height:98upx;float:right;}
		.jiesuan.shanchu{width:150upx;height:98upx;background:#999;color:#ffffff;font-size:34upx;text-align:center;line-height:98upx;float:right;}
	}
	
</style>
